<template>
  <div class="app-container">
    <div class="infoTitle">
      数据统计信息
    </div>
    <div style="margin-top: 18px">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio-button label="年"></el-radio-button>
        <el-radio-button label="季度"></el-radio-button>
      </el-radio-group>

      <el-checkbox label="环比" style="color: #00afff;float: right" v-model="hbchecked"></el-checkbox>
      <el-checkbox label="同比" style="color: #a95812;float: right;margin-right: 5px" v-model="tbchecked" v-if="hbShow"></el-checkbox>
      <el-table :data="tabList1" border style="margin-top: 5px">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="时间" align="center" prop="sj"/>
        <el-table-column label="净资产收益率" align="center" >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="净资产收益率为负数，资本获利能力为负数，会影响公司筹资、投资、和资产运营" placement="bottom-start" v-if="scope.row.jzcsyl < 0">
              <span  style="color: #C03639"><el-tag type="danger">{{scope.row.jzcsyl}}</el-tag></span>
            </el-tooltip>
            <span v-else>{{scope.row.jzcsyl}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.jzcsyl - scope.row.hjzcsyl)/scope.row.jzcsyl * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.jzcsyl - scope.row.tjzcsyl)/scope.row.jzcsyl * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="资产负债率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.zcfzl}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.zcfzl - scope.row.hzcfzl)/scope.row.zcfzl * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.zcfzl - scope.row.tzcfzl)/scope.row.zcfzl * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产收益率" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="总资产收益率为负数，公司营收小于成本，利润为负数，请提高营收或者控制成本" placement="bottom-start" v-if="scope.row.zzcsyl < 0">
              <span  style="color: #C03639"><el-tag type="danger">{{scope.row.zzcsyl}}</el-tag></span>
            </el-tooltip>
            <span v-else>{{scope.row.zzcsyl}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.zzcsyl - scope.row.hzzcsyl)/scope.row.zzcsyl * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.zzcsyl - scope.row.tzzcsyl)/scope.row.zzcsyl * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="销售净利率" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="销售净利率为负数，公司每销售一个产品带来的利润是负的，请加强成本控制" placement="bottom-start" v-if="scope.row.xsjlv < 0">
              <span  style="color: #C03639"><el-tag type="danger">{{scope.row.xsjlv}}</el-tag></span>
            </el-tooltip>
            <span v-else>{{scope.row.xsjlv}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.xsjlv - scope.row.hxsjlv)/scope.row.xsjlv * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.xsjlv - scope.row.txsjlv)/scope.row.xsjlv * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产周转率" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="总资产周转率小于0.8，没有充分利用已有的资产或者存在多余的、闲置的资产，应该提高各项资产的利用效率，处置多余的、闲置的资产！" placement="bottom-start" v-if="scope.row.zzczzl < 0.8">
              <span  style="color: #C03639"><el-tag type="danger">{{scope.row.zzczzl}}</el-tag></span>
            </el-tooltip>
            <span v-else>{{scope.row.zzczzl}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.zzczzl - scope.row.hzzczzl)/scope.row.zzczzl * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.zzczzl - scope.row.tzzczzl)/scope.row.zzczzl * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="存货周转率" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="存货周转率大于3，存货周转速度比较慢，存货储存过多，占用资金多，存货积压过多，请及时处理！" placement="bottom-start" v-if="scope.row.chzzl > 3">
              <span  style="color: #C03639"><el-tag type="danger">{{scope.row.chzzl}}</el-tag></span>
            </el-tooltip>
            <span v-else>{{scope.row.chzzl}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.chzzl - scope.row.hchzzl)/scope.row.chzzl * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.chzzl - scope.row.tchzzl)/scope.row.chzzl * 100| numFilter }}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { analyzeByTime } from "@/api/manage/datacount";
  import echarts from 'echarts'
  export default {
    name: "incomecount",
    components: {},
    filters: {
      numFilter (value) {
        if(value == Infinity || value == -Infinity ||isNaN(value)){
          return 0
        }
        // 截取当前数据到小数点后两位
        return parseFloat(value).toFixed(2)
      }
    },
    // An highlighted block
    watch: {
      $route(){
        this.getList1();
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 便利蜂分店信息表格数据
        tabList1: [],
        radio:'年',
        queryParam:{
          type:1
        },
        checkList:[],
        hbchecked:false,
        tbchecked:false,
        hbShow:false,
      };
    },
    created() {
      this.getList1();
    },
    methods: {
      /** 查询便利蜂分店信息列表 */
      getList1() {
        analyzeByTime(this.queryParam).then(response => {
          this.tabList1 = response.data;
        });
      },
      radioChange(val){
        if(val == '年'){
          this.queryParam.type = 1
          this.hbShow = false
          this.tbchecked =false
        }else if(val == '季度'){
          this.queryParam.type = 2
          this.hbShow = true
        }
        this.getList1()
      },
    }
  };
</script>
<style scoped>
  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
